<template>
  <view class="content">
    <view
      class="popup"
      :class="actionConfig.specClass"
      @touchmove.stop.prevent="stopPrevent"
      @click="toggleSpec"
    >
      <!-- 遮罩层 -->
      <view class="mask" />
      <view class="layer attr-content" @click.stop="stopPrevent">
        <!-- 内容区域 -->
        <view
          v-if="actionConfig.title&&actionConfig.title.length"
          class="action-title"
          :style="{&quot;border-bottom-color&quot;:actionConfig.isBorderColor?&quot;#EBEBEB&quot;:&quot;#fff&quot;}"
          @click="titleClick(actionConfig.type)"
        >{{ actionConfig.title }}</view>
        <view v-if="actionConfig.summary && actionConfig.summary.length" class="action-summary"><view class="summary-center">{{ actionConfig.summary }}</view></view>
        <view class="action-list">
          <view v-for="(item,index) of actionConfig.list" :key="index" class="action-item" @click="itemClick(index,actionConfig.type)">
            <view v-if="typeof(item)==&quot;string&quot;">{{ item }}</view>
            <view v-else :style="{&quot;color&quot;:item.color,&quot;background&quot;:item.background?item.background:&quot;#fff&quot;}">{{ item.title }}</view>
          </view>
        </view>
        <view v-if="!actionConfig.isCloseCancel" class="cancel" :style="{color:actionConfig.cancelColor}" @click="cancelClick">取消</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {

      actionConfig: {
        title: '',
        summary: '',
        list: [],
        type: null,
        isCloseCancel: false,
        cancelColor: '#333333',
        isBorderColor: false,
        titleColor: '#333333',
        specClass: 'none'
      }
    };
  },
  methods: {
    toggleSpec() {
      if (this.actionConfig.specClass === 'show') {
        this.actionConfig.specClass = 'hide';
        setTimeout(() => {
          this.actionConfig.specClass = 'none';
        }, 250);
      } else if (this.actionConfig.specClass === 'none') {
        this.actionConfig.specClass = 'show';
      }
    },
    stopPrevent() {},
    itemClick(index, type) {
      this.$emit('itemClick', index, type);
      this.toggleSpec();
    },
    cancelClick() {
      this.toggleSpec();
    },
    titleClick(type) {
      this.$emit('titleClick', type);
      this.toggleSpec();
    }
  }
};
</script>
<style lang="less" scoped>
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;
			.mask{
				animation: showPopup 0.2s linear both;
			}
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
		&.hide {
			.mask{
				animation: hidePopup 0.2s linear both;
			}
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
		&.none {
			display: none;
		}
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.5);
		}
		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			background-color: #F7F7F7;
			.action-title{
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				color: #333;
				background-color: #fff;
				border-bottom-width: 2upx;
				border-bottom-style: solid;
			}
			.action-summary{
				text-align: center;
				color: #888;
				background-color: #fff;
				box-sizing: border-box;
				padding:  30upx 72upx;
				display: flex;
				justify-content: center;
				align-items: center;

				.summary-center{
					font-size: 28upx;
					color: #666666;
				}
			}
			.action-list{
				background-color: #fff;
				.action-item{
					height: 88upx;
					line-height: 88upx;
					text-align: center;
					color: #333;
					border-top: 2upx solid #EBEBEB;
				}
			}
			.cancel{
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				color: #333;
				background-color: #fff;
				margin-top: 12upx;
			}
		}
		@keyframes showPopup {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes hidePopup {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}
			100% {
				transform: translateY(0%);
			}
		}
		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(120%);
			}
		}
	}
</style>
